<template>
	<view class="wrap u-padding-30">
		<view class="top"></view>

		<view class="payment-info">
			<view class="u-p-t-30 u-p-b-30 bold">订单信息</view>

			<view class="calculation-data">
				<view class="data-title">订单流水号</view>
				<view class="data-text">
					{{payment.serial_code}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">商品总价</view>
				<view class="data-text">
					{{payment.total_amount}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">配送费</view>
				<view class="data-text">
					{{payment.service_fee}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">红包抵扣</view>
				<view class="data-text">
					{{payment.discount_amount}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">实付金额</view>
				<view class="data-text">
					{{payment.paid_amount}}
				</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">付款状态</view>
				<view class="data-text">{{stateText(payment.state)}}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">发货状态</view>
				<view class="data-text">{{deliveryStateText(payment.delivery_state)}}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">发货方式</view>
				<view class="data-text">{{deliveryTypeText(payment.delivery_type)}}</view>
			</view>
			<template v-if="payment.delivery_type==='delivery'">
				<view class="calculation-data">
					<view class="data-title">收货人</view>
					<view class="data-text">{{payment.addr_name}} {{payment.addr_phone}}</view>
				</view>
				<view class="calculation-data">
					<view class="data-title">收货地址</view>
					<view class="data-text">{{payment.addr_city}}{{payment.addr_district}}{{payment.addr_street}}</view>
				</view>
			</template>
			<template v-if="payment.pickup_code">
				<view class="calculation-data">
					<view class="data-title">提货码</view>
					<view class="data-text">{{payment.pickup_code}}</view>
				</view>
			</template>
		</view>

		<view class="u-text-center" v-if="payment.delivery_state==='store_handling'">
			<template v-if="payment.delivery_type==='delivery'">
				<u-button type="primary" size="medium" @click="setDelivery">
					<text style="margin-right: .5em;">
						<u-avatar :src="user.avatar" size="50" style="display: flex;"></u-avatar>
					</text><text>开始配送</text>
				</u-button>
			</template>
			<template v-if="payment.delivery_type==='pickup'">
				<u-button type="warning" size="medium" @click="setDelivery">
					<text style="margin-right: .5em;">
						<u-avatar :src="user.avatar" size="50" style="display: flex;"></u-avatar>
					</text><text>完成配货，通知自提</text>
				</u-button>
			</template>			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				payment_id: '',
				user: {},
				shop: {},
				payment: {}
			}
		},
		onLoad(options) {
			this.payment_id = options.payment_id
			this.getUserInfo()
			this.queryPayment()
		},
		methods: {
			stateText(state){
				if(state==='pending_pay'){
					return '待支付'
				}
				if(state==='paid'){
					return '已支付'
				}
				if(state==='pending_refund'){
					return '待退款'
				}
				if(state==='refunded'){
					return '已退款'
				}
				if(state==='expired'){
					return '已支付超时'
				}
				return state;
			},
			deliveryStateText(deliveryState){
				if(deliveryState==='uncertain'){
					return '不确定'
				}
				if(deliveryState==='complete'){
					return '已完成'
				}
				if(deliveryState==='store_handling'){
					return '商家配货中'
				}
				if(deliveryState==='pending_receive'){
					return '待收货'
				}
				if(deliveryState==='pending_pickup'){
					return '待自提'
				}
				return deliveryState
			},
			deliveryTypeText(type){
				if(type==='delivery'){
					return '配送到家'
				}
				if(type==='pickup'){
					return '门店自提'
				}
				if(type==='neednot'){
					return '不需要发货'
				}
				return type;
			},
			queryPayment() {
				this.$u.post('/admin/delivery/query-payment', {
					payment_id: this.payment_id,
					query_type:'payment_id'
				}).then(res => {
					this.payment = res;
				}).catch(e => {

				})
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
				}).catch(e => {
					console.log(e)
				})
			},
			setDelivery(){
				this.$u.post('/admin/delivery/set-delivery', {payment_id:this.payment.id}).then(res => {
					uni.showToast({
						title: '发货完成',
						icon: 'success'
					});
					this.queryPayment();
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}

		.payment-info {
			background-color: #FFF;
			padding: 0 30rpx 30rpx 30rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.bold {
				font-weight: bold;
				border-bottom: 1rpx solid #c9c8d2;
			}

			.calculation-data {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-top: 30rpx;
				// margin-bottom: 10rpx;

				.data-title {
					width: 6em;
					font-weight: bold;
				}

				.data-text {
					flex: 1
				}
			}

		}
	}
</style>
